<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fnt" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String path = request.getContextPath();
%>
<% String[] ABCD={"A","B","C","D","E","F","G","H","I","G","K","L","M","N"};%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>易驾考章节练习页面</title>
    <link rel="stylesheet" href="<%=path%>/web/css/style2.css"/>
    <link rel="stylesheet" href="<%=path%>/web/css/style/style2.css" />
    <script src="<%=path%>/web/js/jq.js"></script>
    <script src="<%=path%>/web/js/jq1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<jsp:include page="headerandfoter/header.jsp"></jsp:include>
<br><br><br>
<!--内容开始-->
<div class="content" style="padding-bottom: 40px" id="subject">
    <ul class="fl exam_sort">
        <li><img src="/user/picture/${sessionScope.loginUser.pic}" style="width:150px; height:150px; border-radius:100%; overflow:hidden;"></li><br><br>
        <li>用户:<c:if test="${sessionScope.loginUser.userName=='空'}" var="s">游客</c:if><c:if test="${not s}">${sessionScope.loginUser.userName}</c:if></li>
        <li>题数:${sessionScope.listQuestions.size()}</li>
        <li>满分100,60分及格</li>
        <div class="clear"></div>
    </ul>
    <div class="subject" >
        <div class="subject_con" >
            <h1>{{index+1}}.{{questions[index].subject}}(
                {{questions[index].category.categoryName}})
            </h1>
            <table width="272" border="0" cellspacing="0" cellpadding="0" class="selected">
                 <tr v-for="answer,i in questions[index].answers">
                     <td style="width: 60px">
                         <template v-if="questions[index].category.categoryName=='多选题'">
                             <template v-if="answer.userAnswers"><input name="abcd" :value="answer.id" checked="checked" :key="questions[index].category.id" type="checkbox" class="abcd" :data-id="questions[index].category.id" /></template>
                             <template v-else><input name="abcd" :value="answer.id" :key="questions[index].category.id" type="checkbox" class="abcd" :data-id="questions[index].category.id" /></template>
                         </template>
                         <template v-else>
                             <template v-if="answer.userAnswers"><input name="abcd" :value="answer.id" checked="checked" :key="questions[index].category.id" type="radio" class="abcd" :data-id="questions[index].category.id" /> </template>
                             <template v-else><input name="abcd" :value="answer.id" :key="questions[index].category.id" type="radio" class="abcd" :data-id="questions[index].category.id" /> </template>

                         </template>

                     </td>
                    <td> {{answer.answerContent}}</td>
                </tr>
            </table>
            <div class="clear"></div>
        </div>


        <div class="anwsercard">
            <ul class="anwser_ul">
                <template v-for="i in questions.length">
                    <template v-if="index==i-1"><li><a href="#" class="clickeda" @click="numQuestion(i)">{{i}}</a></li></template>
                    <template v-else><li><a href="#" @click="numQuestion(i)">{{i}}</a></li></template>
                </template>
                <div class="clear"></div>
            </ul>
            <div class="clear"></div>
        </div>
    </div>
    <div class="collection">
        <ul>
            <li class="subject_a up" @click="upQuestion" ><a href="#"></a></li>
            <li class="subject_a down" @click="downQuestion"><a href="#"></a></li>
            <li  class="collectbg"><a href="#" class="card" style="padding-left: 30px">展开答题卡</a></li>
            <li class="end" @click="end" style="background-color: red;font-size: 20px"><a href="#" style="padding-left: 17px;width: 100%">结束考试</a></li>
        </ul>
    </div>
</div>
<!--内容结束-->
<!--尾部开始-->
<jsp:include page="headerandfoter/foter.jsp"></jsp:include><!-- 包含尾部 -->
<!--尾部结束-->
<script type="text/javascript" src="<%=path%>/web/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="<%=path%>/web/js/define.js"></script>
<script>
    var num=${sessionScope.num};
    var questions='${sessionScope.questions}';
    console.log(JSON.parse(questions))
    var vm=new Vue({
        el:"#subject",
        data:{questions:JSON.parse(questions),index:num},
        methods:{
            downQuestion:function () {
                var selectAnswer=[];
                var selectDan=$('input:radio[name="abcd"]:checked').val();

                if(selectDan!=null){
                    selectAnswer.push(selectDan);
                }
                var selectDuo=$('input:checkbox[name="abcd"]:checked');
                if (selectDuo!=null){
                    selectDuo.each(function () {
                        selectAnswer.push($(this).val());
                    });
                    selectAnswer=selectAnswer.toString();
                }
                $.ajax({
                    url:"/services/downQuestion",
                    data:{listSelect:selectAnswer},
                    async:false,
                    //dataType:"json",
                    success:function(data){
                        this.questions=data;
                        this.index=this.index+1;
                         if (this.index==this.questions.length){
                             this.index=this.questions.length-1;
                         }
                    }.bind(this)
                });
                vm.$forceUpdate();
            },
            upQuestion:function () {
                var selectAnswer=[];
                var selectDan=$('input:radio[name="abcd"]:checked').val();

                if(selectDan!=null){
                    selectAnswer.push(selectDan);
                }
                var selectDuo=$('input:checkbox[name="abcd"]:checked');
                if (selectDuo!=null){
                    selectDuo.each(function () {
                        selectAnswer.push($(this).val());
                    });
                    selectAnswer=selectAnswer.toString();
                }
                $.ajax({
                    url:"/services/upQuestion",
                    data:{listSelect:selectAnswer},
                    async:false,
                    success:function(data){
                        this.questions=data;
                        this.index=this.index-1;
                        if (this.index<0){
                            this.index=0;
                        }
                    }.bind(this)
                });
                vm.$forceUpdate();
            },
            numQuestion:function (i) {
                var selectAnswer=[];
                var selectDan=$('input:radio[name="abcd"]:checked').val();
                var numm= i;
                if(selectDan!=null){
                    selectAnswer.push(selectDan);
                }
                var selectDuo=$('input:checkbox[name="abcd"]:checked');
                if (selectDuo!=null){
                    selectDuo.each(function () {
                        selectAnswer.push($(this).val());
                    });
                    selectAnswer=selectAnswer.toString();
                }
                $.ajax({
                    url:"/services/numQuestion",
                    data:{listSelect:selectAnswer,numm:numm},
                    async:false,
                    success:function(data){
                        this.questions=data;
                        this.index=numm-1;
                        if (this.index<=0){
                            this.index=0;
                        }
                        if (this.index==questions.length){
                            this.index=questions.length-1;
                        }
                    }.bind(this)
                });
                vm.$forceUpdate();
            },
            end:function () {
                var end=confirm("确定结束考试");
                if (end){
                    var selectAnswer=[];
                    var selectDan=$('input:radio[name="abcd"]:checked').val();
                    if(selectDan!=null){
                        selectAnswer.push(selectDan);
                    }
                    var selectDuo=$('input:checkbox[name="abcd"]:checked');
                    if (selectDuo!=null){
                        selectDuo.each(function () {
                            selectAnswer.push($(this).val());
                        });
                        selectAnswer=selectAnswer.toString();
                    }
                    console.log(1111111111111);
                    location.href="/services/randomTestEnd?listSelect="+selectAnswer;
                }
            }
        }
    });

</script>
</body>
</html>
